<template>
  <div class="item1Body">
    <div class="search">
      <el-select v-model="id" @change="getId" filterable placeholder="请输入设备名称">
        <el-option
            v-for="item in deviceList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
      <img src="./assets/icon_search.png" alt="">
    </div>
    <div class="list">
      <div class="listItem" v-for="(item,index) in list" :key="index">
        <img src="./assets/icon.png" alt="">
        <div class="listItemInfo">
          <numcard :number="item.value"></numcard>
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {cameraLocation} from "../../../../api/api/LargeScreenData.js";
import numcard from "../../../../components/numcard/numcard.vue";

export default {
  name: "title",
  data() {
    return {
      id: '',
      list: []
    }
  },
  components: {numcard},
  props: {
    deviceList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getId(id) {
      this.id = id
      this.$emit('getId', id)
    },
    async getData() {
      try {
        const res = await cameraLocation();
        this.list = res.data;
      } catch (err) {
        console.error(err);
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.item1Body {
  width: calc(100% - 0px);
  position: relative;
  height: calc(100% - 0px);
}

.list {
  width: calc(100% - 0px);
  position: relative;
  height: calc(100% - 60px);
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;

  .listItem {
    width: calc(50% - 20px);
    margin-left: 20px;
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    img {
      width: 80px;
    }

    .listItemInfo {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: nowrap;
      flex-direction: column;
      align-content: flex-start;

      p {
        padding: 0;
        margin: 0;
        margin-left: 5px;
      }
    }
  }

  :deep(.listItem) {
    .numcardItem1 .real-time-num {
      width: auto;
      font-size: 25px;
      height: 35px;
      font-family: MiSans;
      font-weight: bold;
      color: #4ec7ff;
    }
  }
}

.search {
  background: url("./assets/searchbg.png") no-repeat;
  width: calc(100% - 20px);
  margin: 10px auto;
  height: 40px;
  position: relative;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  img {
    margin-left: 10px;
    width: 20px;
    position: absolute;
    right: 10px;
  }
}
</style>
<style lang="scss">
.search {
  .el-select {
    width: 100% !important;
  }

  .el-input__suffix {
    display: none;
  }

  .el-input__inner {
    padding-left: 2px !important;
    outline: none !important;
    border: none !important;
  }

  .el-input {
    --el-input-text-color: none !important;
    --el-input-border: none !important;
    --el-input-hover-border: none !important;
    --el-input-focus-border: none !important;
    --el-input-transparent-border: 0 0 0 1px transparent inset;
    --el-input-border-color: none !important;
    --el-input-border-radius: none !important;
    --el-input-bg-color: none !important;
    --el-input-focus-border-color: none !important;
  }

  .el-select {
    --el-select-input-focus-border-color: none !important;
  }

  .el-input__wrapper {
    box-shadow: 0 0 0 0px var(--el-select-input-focus-border-color) inset !important;
  }
}


.el-popper.is-light {
  background: #031928 !important;
  border: none !important;
}

.el-select-dropdown__item {
  font-size: 14px !important;
  font-family: PingFang;
  color: #FFFFFF !important;
  height: 30px !important;
  border: 1px solid rgba(#4a5f85, 0);
}

.el-select-dropdown__item:hover {
  border: 1px solid #28d9ff;
}

.el-select__popper.el-popper {
  border: 1px solid #4a5f85;
}

.el-popper__arrow {
  display: none;
}

.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background: #1c75a1 !important;
}

.el-select-dropdown {
  background: #1c75a1;
  border: 1px solid #1c75a1;
  border-radius: 2px;
  box-shadow: none;
  margin-top: -10px;

  .el-scrollbar {
    --el-scrollbar-opacity: 0.3;
    --el-scrollbar-bg-color: #0a1b50;
    --el-scrollbar-hover-opacity: 0.5;
    --el-scrollbar-hover-bg-color: #0a1b50;
  }
}

</style>
